JavaScript各种循环对比

数组 : For / ForEach / Map /Reduce /Filter
对象 : For In / For of(ES6) / testObj[‘name’]

1.数组遍历

• 普通For循环

  for (var i = 100; i > 0 ; i--)
  {
    console.log(i);
  }

  写法冗余,适合初学者,通过调试可以直观的看到循环的流程

• ForEach

  var ary = [12,23,24,42,1];
  var res = ary.forEach(function (item,index,input) {
    console.log(item)
    console.log(index)
    console.log(input)
    input[index] = item*10;
  })
  console.log(res);//-->undefined;
  console.log(ary);//-->会对原来的数组产生改变；

  用来代替for循环,写法更简洁

• Map

  //不使用Map
  var oldArr = [{first_name:"Colin",last_name:"Toh"},{first_name:"Addy",last_name:"Osmani"},{first_name:"Yehuda",last_name:"Katz"}];
  
  function getNewArr(){
  
    var newArr = [];
  
    for(var i= 0, l = oldArr.length; i< l; i++){
      var item = oldArr[i];
      item.full_name = [item.first_name,item.last_name].join(" ");
      newArr[i] = item;
    }
  
    return newArr;
  }

  //使用Map
  var oldArr = [{first_name:"Colin",last_name:"Toh"},{first_name:"Addy",last_name:"Osmani"},{first_name:"Yehuda",last_name:"Katz"}];
   
  function getNewArr(){
       
    return oldArr.map(function(item,index){
      item.full_name = [item.first_name,item.last_name].join(" ");
      return item;
    });
     
  }
   
  console.log(getNewArr());

  Map使用方法与forEach相同,不过不会修改原数组的值,遍历后返回的值会拼成一个新的数组。只需要声明一个变量来接收这个数组就可以

• Reduce

  function passValue(){
    return arr.reduce(function(total,currentValue,currentIndex,arr){
      console.log("prev:",total);//所有计算后的值
      console.log("next:",currentValue);//当前循环到的值
      console.log("next:",currentIndex);//当前循环index
      console.log("next:",arr);//当前循环 源 数组
  
      total[currentValue] = 1;
      //currentValue是当前循环到的值,让这个值做对象的键,并给他复制为1
      return total;
    },{name:'呵呵'});
  }
  
  var newObject = passValue()
  console.log(newObject)

  Reduce外层是普通的for循环,回调函数里面所用到的total使用的是递归方法,可以存储所有计算的总和

• Filter

  var ages = [32, 33, 16, 40];
  
  function checkAdult(age,currentIndex,arr) {
      return age >= 18;
  }
  
  function myFunction() {
      document.getElementById("demo").innerHTML = ages.filter(checkAdult);
  }

  Filter比ForEach更为简洁,不改变原数组的值,筛选元素更加方便。

2.对象遍历

• For In / For of

  let arr = ["a","b"];
  for (a in arr) {
    console.log(a);//1,2
  }
  
  for (a of arr) {
    console.log(a);//a,b
  }

  For In遍历对象的键 For of (ES6)遍历对象的值 —> 也可用于数组的遍历(不如用forEach)

3.总结

• 数组 :
  • 1.ForEach可以满足大部分应用场景,不过会改变原数组的值!
  • 2.Map,Reduce,Filter不会改变原数组的值.会通过return的值形成一个新的数组.
  • 3.当需求简单且不能改变源数组的值,用Map就可以实现需求.
  • 4.需求复杂,需要递归时可以使用Reduce.
  • 5.Filter就是单纯的过滤器.
• 对象 :
  • 1.遍历对象使用ES6新特性,For of 可以更加直观的看到对象每个属性的值.